<template>
  <div id="page_4">
    <h2 class="app__title--second">3. 项目目录讲解</h2>
    <p>以本演示项目为例(<b>黑色</b> 为cli创建文件夹，<b class="color__orange">橘色</b> 为推荐创建文件夹)</p>
    <div class="catalog">
      <img src="../assets/images/catalog.jpg" alt="">
      <ul class="catalog__intro">
        <li><b>node_modules</b> - 项目依赖的包，包括开发依赖和生产依赖</li>
        <li><b>public</b> - 此目录包含的文件会直接打包到最后的生产中</li>
        <li><b>src</b> - 项目开发根目录</li>
        <li><b class="color__orange">api</b> - 前后端对接接口目录</li>
        <li><b>assets</b> - 资源文件夹，存放项目所需要的静态资源的目录</li>
        <li><b>components</b> - 组件文件夹，存放公共可重复使用的组件的文件夹</li>
        <li><b class="color__orange">pages(views)</b> - 项目页面存放文件夹</li>
        <li><b class="color__orange">router</b> - 项目路由存放位置(vue-router)</li>
        <li><b class="color__orange">store</b> - 项目状态管理存放位置(vuex)</li>
        <li><b class="color__orange">utils</b> - 项目所使用的通用工具存放的文件夹</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "Page4",
  data() {
    return {
      desc: "3. 项目目录讲解"
    }
  }
}
</script>

<style scoped>
.catalog {
  display: flex;
}
.catalog img {
  flex-grow: 0;
  flex-shrink: 0;
}
.color__orange {
  color: orange;
}
</style>